<style>
    body {
        font-size: 14px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    ::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #535353;
    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

    ul, li {
        list-style: none;
    }

    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;
        overflow: hidden;
    }

    a {
        color: #cecece;
    }

    .custom-dialog {
        display: none;
        padding-right: 20px;
        box-sizing: border-box;
        padding-top: 20px;
    }

    .test {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .play .title {
        width: 100%;
        height: 60px;
        background: #2E2D3C;
    }

    .play .title a {
        color: white;
        font-size: 18px;
        line-height: 60px;
        margin: 0 20px;
    }

    .play .title a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    .play .title span {
        color: #cecece;
        font-size: 16px;
    }

    .play .video {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 60px;
        box-sizing: border-box;
    }

    .play .video #player {
        width: 80%;
        height: 100%;
        float: left;
    }

    .play .video #exchange {
        width: 20%;
        height: 100%;
        float: left;
        background: #1D1D1D;
        position: relative;
    }

    #list .title {
        font-size: 13px;
        color: white;
        padding-left: 10px;
    }

    #list .link {
        font-size: 12px;
        color: white;
        padding-left: 30px;
    }

    #list .link i {
        margin-right: 5px;
    }

    #list .item {
        line-height: 35px;
        box-sizing: border-box;
    }

    #list .child-item {
        line-height: 40px;
        background: #f3f3f3;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 20px;
    }

    #list .link a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    #dir {
        display: none;
        position: absolute;
        left: 0;
        width: 240px;
        top: 60px;
        bottom: 0;
        overflow-y: auto;
        background: #2E2D3C;
    }

    #tabs {
        height: 40px;
        line-height: 40px;
    }

    .tab {
        float: left;
        width: 25%;
        text-align: center;
        color: #cecece;
    }

    .tab:hover {
        color: #00a2d4;
    }

    .tab-selected {
        color: #00a2d4;
        border-bottom: 2px solid #00a2d4;
    }

    #send {
        position: absolute;
        height: 200px;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #2E2D3C;
    }

    #tool {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        line-height: 20px;
    }

    #content {
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #2E2D3C;
        border-bottom: 1px solid #2E2D3C;
    }


    #input {
        height: 135px;
        width: 100%;
        overflow-y: auto;
        padding: 10px;
        margin-top: 25px;
        line-height: 25px;
        box-sizing: border-box;
        background: transparent;
        text-align: start;
        border: none;
        color: white;
        font-size: 13px;
        resize: none;
    }

    #btn {
        height: 40px;
        line-height: 40px;
        width: 100%;
        text-align: right;
    }

    #list-msg li {
        padding: 10px;
        box-sizing: border-box;
    }

    #list-user li {
        padding-left: 10px;
        line-height: 20px;
    }

    #list-msg .user, #list-user .user {
        color: #00a2d4;
        font-size: 15px;
        line-height: 35px;
    }

    #list-msg .user img, #list-user .user img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 10px;
    }

    #list-msg .msg {
        color: #cecece;
        font-size: 12px;
        line-height: 25px;
        padding-left: 30px;
    }

    #msg {
        overflow-y: auto;
    }

    #node, #editor {
        width: 100%;
        height: 100%;
    }

    #btn-editor-save {
        position: absolute;
        right: 20px;
        bottom: 20px;
    }

    #user p {
        padding: 10px;
        font-size: 16px;
        border-bottom: 1px solid #3b4249;
    }

    #list-user-online li {
        display: inline-block;
        width: 60px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: white;
    }

    #list-user-not-online li {
        padding: 0 20px;
        line-height: 30px;
        font-size: 12px;
        color: white;
    }

    #list-user-not-online span {
        margin-left: 50px;
        font-size: 10px;
        color: #00a2d4;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="play">
        <div class="title">
            <a><i class="iconfont icon-category" id="btn-dir">&nbsp;目录</i></a><span>平面设计课程</span>
        </div>
        <div class="video">
            <video id="player" class="video-js vjs-big-play-centered" controls preload="none"
                   poster="http://vjs.zencdn.net/v/oceans.png">
                <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                 
            </video>
            <!--聊天室-->
            <div id="exchange">
                <div id="tabs">
                    <div id="tab1" class="tab tab-selected">聊天</div>
                    <div id="tab2" class="tab">人员</div>
                    <div id="tab3" class="tab">笔记</div>
                    <div id="tab4" class="tab">问答</div>
                </div>
                <div id="content">
                    <div id="msg">
                        <ul id="list-msg">
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗能</p>
                            </li>
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗</p>
                            </li>
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗</p>
                            </li>
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗能</p>
                            </li>
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗</p>
                            </li>
                            <li>
                                <p class="user"><img src="./res/images/gitee.ico">忘掉吧</p>
                                <p class="msg">
                                    能再讲一遍吗</p>
                            </li>
                        </ul>
                        <div id="send">
                            <label for="input"></label><textarea id="input"></textarea>
                            <div id="btn">
                                <button class="layui-btn layui-btn-normal layui-btn-sm"
                                        style="margin-right: 10px;margin-bottom: 5px" id="btn-send-msg">发送
                                </button>
                            </div>

                            <div id="tool">
                                <i class="layui-icon" style="color: white;float: left;padding: 5px" title="表情"
                                   id="input-biaoqing">&#xe60c;</i>
                                <i class="layui-icon" style="color: white;float: left;padding: 5px" title="图片"
                                   id="insert-img">&#xe60d;</i>
                                <i class="layui-icon" style="color: white;float: right;padding: 5px" title="清空聊天列表"
                                   id="btn-clean">&#xe631;</i>
                            </div>
                        </div>
                    </div>
                    <div id="user" style="display: none">
                        <div>
                            <div id="count-user" style="width: 150px;height:150px;margin-left: 50px"></div>
                        </div>
                        <p style="color: #00a2d4">未在线人员名单</p>
                        <ul id="list-user-not-online">
                            <li>张三 <span>请假</span></li>
                            <li>张三 <span>未知</span></li>
                            <li>张三 <span>请假</span></li>
                        </ul>
                        <p style="color: white">在线人员名单</p>
                        <ul id="list-user-online">
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>
                            <li>张三</li>


                        </ul>
                    </div>

                    <div id="node" style="display: none;">
                        <textarea id="editor"></textarea>
                        <div id="btn-editor-save" class="layui-btn layui-btn-normal layui-btn-xs">保存</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="dir">
    <ul id="list">
        <li class="item">
            <p class="title">平面设计系列课程</p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>
        </li>
        <!--        <li class="item">-->
        <!--            <p class="title">平面设计系列课程</p>-->
        <!--            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>-->
        <!--            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>-->
        <!--        </li>-->
        <!--        <li class="item">-->
        <!--            <p class="title">平面设计系列课程</p>-->
        <!--            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>-->
        <!--            <p class="link"><a><i class="iconfont icon-bofang"></i>平面设计操作技巧</a></p>-->
        <!--        </li>-->
    </ul>
</div>
<script src="./res/js/plugin/chat/app.js" type="text/javascript"></script>
<script>
    layui.use('layedit', function () {
        var layedit = layui.layedit;
        var editIndex = layedit.build('editor', {
            height: $('#node').height(),
        });
        $(window).resize(function () {
            layedit.set({
                height: $('#node').height(),
            });
        });
        //监听hashchange
        // $(window).bind('hashchange', function () {
        //     if (window.location.hash !== '#views/live/template/live') {
        //
        //     }
        // });
        // tab点击事件
        $("#tabs").find('div').click(function () {
            $("#tabs").find('div').removeClass('tab-selected');
            $(this).addClass('tab-selected');
            var id = $(this).prop('id');
            var msgDiv = $('#msg');
            var userDiv = $('#user');
            var nodeDiv = $('#node');
            switch (id) {
                case 'tab1':
                    msgDiv.show();
                    nodeDiv.hide();
                    userDiv.hide();
                    break;
                case 'tab2':
                    msgDiv.hide();
                    userDiv.show();
                    nodeDiv.hide();
                    break;
                case 'tab3':
                    userDiv.hide();
                    msgDiv.hide();
                    nodeDiv.show();
                    break;
            }
        });

        // 显示隐藏目录
        $('#btn-dir').click(function () {
            $('#dir').toggle();
        });

        var myChart = echarts.init(document.getElementById('count-user'));

        myChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [
                {
                    name: '上课情况',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    center: ['50%', '60%'],
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        {
                            value: 4, name: '离线', itemStyle: {
                                normal: {
                                    color: '#aa1111'
                                }
                            }
                        },
                        {
                            value: 46, name: '在线', itemStyle: {
                                normal: {
                                    color: '#00a2d4'
                                }
                            }
                        },
                    ]
                }
            ]
        })
    });
    // var courseId = getHashParam().id;
    var courseId = 16;
    var isLivePage = true;// 是否是直播界面
    var player = videojs('player', {
        controls: true,
        autoplay: false,
        preload: 'auto',
    });
    // var player = videojs('player', {
    //     autoplay: true,
    //     controls: true,//控制条
    //     techOrder: ["flash"],//设置flash播放
    //     muted: false,// 静音
    //     preload: "auto",// 预加载
    //     playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度
    // });
    //设置本地flash插件地址
    videojs.options.flash.swf = "./res/js/plugin/video-js/js/video-js.swf";

    $(function () {
        //loadLiveData();
        //  connect();
        //  发送消息
        $('#btn-send-msg').click(function () {
            sendMsg();
        });
        // 清空聊天列表
        $('#btn-clean').click(function () {
            clean();
        });

    });

    //加载课程信息
    function loadLiveData() {
        $.ajax({
            url: context + '/api/live/getPullParam?course_id=' + courseId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    // videojs("player").ready(function () {
                    //     var myPlayer = this;
                    //     myPlayer.src(result.data.server); /*动态设置video.js播放的地址。*/
                    //     myPlayer.autoplay();
                    // });
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //加载目录
    function loadDirData() {
        $.ajax({
            url: context + '/api/educourse/getTask?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    var list = $('#list');
                    list.empty();
                    for (var i = 0; i < data.length; i++) {
                        var li = '    <li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
                            '                        class="handler">\n' +
                            '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
                            '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
                            '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
                            '                    </span>\n' +
                            '                </li>';
                        list.append(li);
                    }
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }


</script>
